<template>
  <div class="compoentBox">
    <Title :title="'路口实时事件'"/>
    <el-select v-model="cureven" placeholder="请选择" @change="initData" class="selectBox">
      <el-option
        v-for="item in evenList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
        style="font-size: 12px;">
      </el-option>
    </el-select>
    <div class="tableContainer">
      <div class="text">
        <div class="all">
          <!-- <div class="tableCell">
            <span>排名</span><span>路口名称</span><span>数据量</span>
          </div> -->
          <div class="tableCell" v-for="(ele, index) in tableData" :key="index">
            <p>{{ ele.name }}</p><p>{{ ele.type + '' }}</p><p>{{ ele.dateTime }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, computed, watch } from 'vue';
import Title from './title.vue'
import { useUserStore } from '@/store/user';
// import { xiaoche } from '@/assets/images/imagesIn'
import { getJunctionEven } from '../../../utils/apiComponent'

export default defineComponent({
  name: 'ComponentOne',
  components: {
    Title
  },
  setup() {
    const data = reactive({
      hover: '1',
      cureven: '7',
      evenList: [{
        id: '7',
        name: '单车'
      }, {
        id: '8',
        name: '多车'
      }, {
        id: '11',
        name: '违规变道'
      }, {
        id: '13',
        name: '逆向行车'
      }, {
        id: '40',
        name: '预警事件'
      }],
      tableData: [
        {
          "id": 1000000001,
          "name": "违规掉头",
          "type": "交通事件",
          "dateTime": "2024-04-23 12:09"
        },
        {
          "id": 1000000001,
          "name": "违规掉头",
          "type": "交通事件",
          "dateTime": "2024-04-23 12:09"
        },
        {
          "id": 1000000001,
          "name": "违规掉头",
          "type": "交通事件",
          "dateTime": "2024-04-23 12:09"
        },
        {
          "id": 1000000001,
          "name": "违规掉头",
          "type": "交通事件",
          "dateTime": "2024-04-23 12:09"
        }]
    })
    const initData = () => {
      getJunctionEven(data.cureven).then((res) => {
        // console.log(res)
        data.tableData = res.splice(4)
      })
    }
    const userStore = useUserStore()
    // 获取搜索路口值
    const searchValue = computed(() => {
      initData()
      return userStore.getSearchValueId
    })
    watch(searchValue, () => {})

    onMounted(() => {
      // initData()
    })
    const refData = toRefs(data)
    const handleEntrance = (item) => {
      data.hover = item.id
    }
    return {
      ...refData,
      handleEntrance
    }
  }
})
</script>

<style lang="less" scoped>

.compoentBox{
  position: relative;
}
.selectBox{
  position: absolute;
  top: 20px;
  right: 0;
  width: 166px;
  font-size: 18px;
  z-index: 1;
}
.tableContainer{
  width: 100%;
  // margin: 10px auto;
}
.all{
  // padding: 0 30px;
  /* background-color: rgba(0,0,0,.5); */
  /* border: 1px solid rgba(255,255,255, .15); */
  border-radius: 2px;;
  // margin: 10px 0;
  // margin-bottom: 10px;
}
.tableCell{
  display: flex;
  justify-content: space-around;
  align-items: center;
  color:#fff;
  height: 70px;
  /* border-bottom: 1px solid rgba(255,255,255, .15); */
  background: rgba(80,140,224,0.2);
  font-size: 14px;
}
.tableCell:nth-child(even) {
  // background:-webkit-linear-gradient(left, transparent, rgba(96, 124, 190, .2),transparent);
  background: rgba(14,39,88,0.35);
}
.tableCell span{
  /* width: 35%; */
  font-size: 16px;
  color: #90A5D6;
  text-align: center;
}
.tableCell p{
  /* width: 35%; */
  text-align: center;
}
.tableCell b{
  /* width: 8%; */
  text-align: center;
}
.tableCell strong{
  /* width: 20%; */
  text-align: center;
}


</style>